<template>
  <div class="p-2">
    <a-spin :spinning="loading">
      <a-card title="发起流程">
        <div class="form-conf">
          <component :is="componentPath" ref="formRef"></component>
        </div>
        <div class="cu-submit">
          <a-space>
            <a-button type="primary" @click="commit">提交</a-button>
            <a-button @click="test">流程模拟</a-button>
            <!--   <a-button @click="test2">获取流程图</a-button> -->
          </a-space>
        </div>
      </a-card>

      <a-modal :title="dialog.title" v-model:open="dialog.visible" width="80%">
        <a-tabs>
          <a-tab-pane key="flow" tab="流程图">
            <process-viewer
              :key="`designer-${loadIndex}`"
              :style="'height:' + height"
              :xml="processXml"
              :finishedInfo="finishedInfo"
              :allCommentList="historyProcNodeList"
            />
          </a-tab-pane>
        </a-tabs>
      </a-modal>
    </a-spin>
   
  </div>
</template>

<script setup name="StartRouterForm">
  import { formApi } from '/@/api/workflow/form';
  import ProcessViewer from '/@/components/ProcessViewer/index.vue';
  import { businessApi } from '/@/api/workflow/business';
  //动态引入组件

 
  const componentPath = ref(defineAsyncComponent(() => import(`/@/views/business/emptyForm.vue`)));

  function setComponentPath(path) {
    componentPath.value = defineAsyncComponent(() => import(/* @vite-ignore */'/@/views' + path)) ;

  
  }

  const loading = ref(false);
  const historyProcNodeList = ref([]);
  const loadIndex = ref(0);
  const height = ref(document.documentElement.clientHeight - 205 + 'px;');
  const processXml = ref('');
  const finishedInfo = ref({});
  const base64Img = ref('');

  const route = useRoute();
  const { proxy } = getCurrentInstance();

  const formRef = ref();

  const dialog = reactive({
    visible: false,
    title: '',
  });

  const businessBo = reactive({
    formData: {},
    formId: '',
    processKey: '',
    servicePath: '',
    definitionId: '',
    variables: {},
  });

  const initData = async () => {
    // 初始化数据
    let { data } = await formApi.getFormByProcKey(route.query.processKey);
    console.log('result', data);

    setComponentPath(data.componentPath);
    Object.assign(businessBo, {
      formId: data.formId,
      processKey: data.processKey,
      definitionId: route.query.definitionId,
      servicePath: data.servicePath,
    });
  };

  const commit = async () => {
    let { formData, variables } = await formRef.value.handleSubmit();
    Object.assign(businessBo, {
      formData: formData,
      variables: variables,
    });
    let { data } = await businessApi.commit(businessBo);
    console.log('result', data);
  };

  const test = async () => {
    let { formData, variables } = await formRef.value.handleSubmit();
    Object.assign(businessBo, {
      formData: formData,
      variables: variables,
    });
    let result = await businessApi.preview(businessBo);
    console.log('result', result.data);
    historyProcNodeList.value = result.data.historyList;
    processXml.value = result.data.processXml;
    finishedInfo.value = result.data.finishedInfo;

    dialog.visible = true;
    dialog.title = '流程模拟';
    loading.value = false;
  };

  // const test2 = async () => {
  //   let { data } = await formRef.value.previewSubmit2();
  //   console.log('result', data);
  //   processXml.value = data;
  //   dialog.visible = true;
  //   dialog.title = '流程模拟';
  // };

  const reset = () => {
    // 重置表单
  };

  const tagType = (val) => {
    return val ? 'success' : 'info';
  };

  const commentType = (val) => {
    const types = {
      1: '通过',
      2: '退回',
      3: '驳回',
      4: '委派',
      5: '转办',
      6: '终止',
      7: '撤回',
    };
    return types[val];
  };

  const approveTypeTag = (val) => {
    const types = {
      1: 'success',
      2: 'warning',
      3: 'error',
      4: 'primary',
      5: 'success',
      6: 'error',
      7: 'default',
    };
    return types[val];
  };

  onMounted(() => {
    initData();
  });
</script>

<style scoped>
  .form-conf {
    margin: 15px auto;
  }
  .cu-submit {
    text-align: center;
    margin-top: 24px;
  }
</style>
